<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 1. block
         * 作用: 将元素显示为块级元素，每个元素会独占一行，宽度默认占满父容器的宽度。
         * 
         * 2.inline
         * 作用: 将元素显示为行内元素，元素不会独占一行，宽度根据内容自动适应，多个 inline 元素可以排在同一行内。
         * 
         * 3. inline-block
         * 作用: 结合了 block 和 inline 的特点，元素不独占一行，但可以设置宽高。
         * 
         * 4. flex
         * 作用: 使元素成为弹性布局容器，子元素可以在主轴（水平或垂直）方向上灵活布局，支持对齐、排序和间距等控制。
         * 
         * 5. grid
         * 作用: 将元素变为网格布局容器，允许子元素按行和列分布在网格上，支持精确的网格布局控制。
         * 
         * 6. inline-flex
         * 作用: 将元素显示为行内弹性布局容器，与 flex 类似，但不独占一行，多个 inline-flex 元素可以在同一行内排列。
         * 
         * 7. none
         * 作用: 隐藏元素，元素在页面中完全不可见，不占据任何空间。
         * 
         * 8. contents
         * 作用: 使元素本身消失，只保留其子元素，并直接参与布局，但在某些情况下可能会导致不可预料的布局问题。
         * 
         * 9.initial
         * 作用: 将元素的 display 属性重置为其默认值（通常是 block 或 inline）。
         * 
         * 10. inherit
         * 作用: 继承父元素的 display 属性值。
         * 
         * 11. unset
         * 作用: 如果该属性是继承属性，则继承父元素的值；否则，使用其初始值。
         * 
        */
    </script>
</body>
</html>